// Base element styles (global HTML elements)

@import "variables";

/* Work around a bug in Bootstrap's navigation bar. When the display is narrow,
   the navigation bar gets longer, but the body padding doesn't adjust.
   The result is that the navigation bar overlaps the beginning of the
   body content below it.  This particular workaround is based on:
   http://stackoverflow.com/questions/10336194/
   twitter-bootstrap-top-nav-bar-blocking-top-content-of-the-page */

body {
  padding-top: 80px;
}

@media (max-width: $screen-xs-max) {
  body {
    padding-top: 100px;
  }
}

html, body {
  height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 450;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
  min-height: 12ex;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

// Project Display tables
.table thead tr th, .table tbody tr td {
  text-align: center;
}

.tab-title {
  margin-left: 5px;
  margin-right: 5px;
}

td p {
  text-align: left;
  font-size: 14px;
  line-height: 1.42857143;
  padding-left: 5px;
  padding-right: 5px;
}

nav {
  min-width: 15em;
}

// Container utilities
.container_padding {
  padding: 1em 0;
}

.container_margins {
  min-height: 100%;
  height: auto;
  margin: 1.5em auto -9.6em;
  padding-bottom: 100px;
}

// Bootstrap button override
.btn {
  padding-left: 3px;
  padding-right: 3px;
}
